<template>
	<div class="articles">
		<!-- 需要重新加载页 -->
		<banner :src="this.doc.background" v-if="isRefresh"></banner>
		<div class="site-content animate">
			<!-- 文章目录 -->
			<div id="article-menus" v-if="isShouMenu">
				<menu-tree :menus="menus" child-label="child"></menu-tree>
			</div>
			<main class="site-main">
				<article class="hentry">
					<!-- 文章头部 -->
					<header class="entry-header">
						<!-- 标题输出 -->
						<h1 class="entry-title">{{doc.title}}</h1>
						<hr>
						<div class="breadcrumbs">
							<div id="crumbs" class="time">最后更新时间：{{doc.lastTime}}</div>
							<div class="author">作者：{{doc.author}}</div>
						</div>
					</header>
					<!-- 正文输出 -->
					<div class="entry-content">
						<div v-html="doc.content" v-highlight>{{doc.content}}</div>
					</div>
					<!-- 文章底部 -->
					<section-title>
						<footer class="post-footer">
							<!-- 阅读次数 -->
							<div class="post-like">
								<i class="iconfont iconeyes"></i>
								<span class="count">{{doc.viewCount}}</span>
							</div>
							<!-- 分享按钮 -->

							<!-- 赞助按钮 -->
							<div class="donate" @click="showDonate=!showDonate">
								<span>赏</span>
								<ul class="donate_inner" :class="{'show':showDonate}">
									<!-- 后端搭建完成再修改 -->
									<li class="wedonate"><img src="http://cloud.kingyin.club/img/wepay/1.png">
										<p>微信</p>
									</li>
									<!--                                    <li class="alidonate"><img src="http://cdn.fengziy.cn/gblog/ali_pay.jpg"><p>支付宝</p></li>
 -->
								</ul>
							</div>
							<!-- 文章标签 -->
							<div class="post-tags">
								<i class="iconfont iconcategory"></i>
								<router-link :to="`/category/${doc.type}`">{{doc.type}}</router-link>
							</div>
						</footer>
					</section-title>

					<!--声明-->
					<div class="open-message">
						<p>声明：Ky-Blog博客|版权所有，违者必究|如未注明，均为原创|本网站采用<a
								href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
								target="_blank">BY-NC-SA</a>协议进行授权</p>
						<p>转载：转载请注明原文链接 - <a href="/">{{doc.title}}</a></p>
					</div>

					<!--评论-->
					<remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
					<div class="more" v-show="true">
						<div class="more-btn" @click="isShow">{{msg}}</div>
					</div>
					<transition name="router-slid">
						<div class="comments" v-show="showComment">
							<comment v-for="item in comments" :key="item.id" :comment="item">
								<!-- <template v-if="item.reply.length">
                                <comment v-for="reply in item.reply" :key="reply.id" :comment="reply"></comment>
                            </template> -->
							</comment>
							<comment-message-editor :inline="true" buttonText="评论" @submit="submitComment">
							</comment-message-editor>
							<br />
						</div>
					</transition>
				</article>
			</main>
		</div>
	</div>
</template>

<script>
	import Banner from '@/components/banner'
	import sectionTitle from '@/components/section-title'
	import comment from '@/components/comment'
	import menuTree from '@/components/menu-tree'
	import commentMessageEditor from 'comment-message-editor'
	import {
		fetchComment,
		fetchArticles,
		submitComment
	} from '../api'
	import {
		formatTime,
		htmlDecode
	} from '../utils/index.js'

	export default {
		name: 'articles',
		data() {
			return {
				isComment: false,
				isShouMenu: this.hasMoreWidth(),
				currentComment:'',
				isRefresh: true,
				doc: {
					content: '',
					title: '',
					author: '',
					lastTime: '',
					viewCount: 0,
					background: ''
				},
				content: '<p style="text-align: center;">正在维护</p><hr /><p>&nbsp;</p>',
				showDonate: false,
				comments: [],
				menus: [],
				showComment: false,
				msg: '查看评论',
				boxshow: false
			}
		},
		components: {
			Banner,
			sectionTitle,
			comment,
			menuTree,
			commentMessageEditor,
			'remote-js': {
				render(createElement) {
					return createElement('script', {
						attrs: {
							type: 'text/javascript',
							src: this.src
						}
					});
				},
				props: {
					src: {
						type: String,
						required: true
					},
				},
			}
		},
		methods: {
			// 添加判断方法
			  hasMoreWidth() {
				  var screenWidth = document.body.clientWidth     // 屏幕宽
				  // var screeHeight = document.body.clientHeight    // 屏幕高
			    return screenWidth > 1560;
			   },
			isShow() {
				this.showComment = !this.showComment
				this.showComment ? this.msg = '收起评论' : this.msg = '查看评论'
			},
			getArticles: async function() {
				await fetchArticles(this.$route.params.id).then(res => {
					this.doc = res.data
					this.doc.content = htmlDecode(res.data.content);

					this.doc.lastTime = formatTime(this.doc.lastTime, 1)
				}).catch(err => {
					console.log(err)
				})
				this.isRefresh = this.isRefresh ? false : true;
				this.$nextTick(function() {
					this.isRefresh = this.isRefresh ? false : true;
				});
			},
			getComment() {
				fetchComment({
					id: this.$route.params.id
				}).then(res => {
					if (res.code === 20000) {
						this.comments = res.data || []
					}
				}).catch(err => {
					console.log(err)
				})
			},
			fetchH(arr, left, right) {
				if (right) {
					return arr.filter(item => item.offsetTop > left && item.offsetTop < right)
				} else {
					return arr.filter(item => item.offsetTop > left)
				}
			},
			submitComment(v) {
				if (this.currentComment === v) {
					this.$message({
						showClose: true,
						message: '这条评论您已经评论过啦',
						type: 'success'
					});
					return
				}
				this.currentComment = v;
				if (v === '') {
					return
				}
				submitComment({
					docId: this.doc.id,
					fromUserName: returnCitySN['cname'] + '网友',
					fromUserAvatar: '',
					content: v,
					toUserId: this.doc.author,
					createTime: (new Date()).valueOf()
				}).then(res => {
					if (res.code === 20000) {
						this.currentComment = v;
						this.$message({
							showClose: true,
							message: res.data,
							type: 'success'
						});
					} else {
						this.$message({
							showClose: true,
							message: res.msg,
							type: 'warning'
						});
						this.currentComment = ''
					}
				}).catch(err => {
					this.currentComment = ''
					console.log(err)
				})

			},
			// 生成目录
			createMenus() {
				let arr = []
				for (let i = 6; i > 0; i--) {
					let temp = []
					let e = document.querySelector(".entry-content").querySelectorAll(`h${i}`)
					for (let j = 0; j < e.length; j++) {
						let child = this.fetchH(arr, e[j].offsetTop, (j + 1 === e.length) ? undefined : e[j + 1].offsetTop)
						let as = e[j].querySelectorAll('a');
						if (as.length > 0) {
							if (as[0].id)
							e[j].id = as[0].id
						}
						temp.push({
							h: i,
							title: e[j].innerText,
							id: e[j].id,
							offsetTop: e[j].offsetTop,
							child
						})
					}
					if (temp.length) {
						arr = temp
					}
				}
				this.menus = arr
			}
		},
		mounted: async function() {
			this.getComment()
			await this.getArticles()
			var Ip = returnCitySN['cip']
			var cityname = returnCitySN['cname']
			this.createMenus()
		},
		created() {
			
			// this.content = htmlDecode("<p style="text-align: center;">大家好</p><hr /><p>&nbsp;</p>")		
		}
	}
</script>
<style scoped lang="less">
	.router-slid-enter-active,
	.router-slid-leave-active {
		transition: all .6s;
	}

	.router-slid-enter,
	.router-slid-leave-active {
		transform: translate3d(0, 3rem, 0);
		opacity: 0;
	}

	.site-content {
		position: relative;

		.site-main {
			padding: 80px 0 0 0;
		}
	}

	.more {
		margin: 50px 0;

		.more-btn {
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #ADADAD;
			border: 1px solid #ADADAD;
			border-radius: 20px;
			margin: 0 auto;
			cursor: pointer;

			&:hover {
				color: #8fd0cc;
				border: 1px dashed #8fd0cc;
			}
		}
	}

	#article-menus {
		position: sticky;
		top: 0;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
		border-radius: 3px;
		padding: 15px;
		width: 300px;
		transform: translateX(-120%) translateY(150px);
		font-size: 14px;
	}

	article.hentry {
		.entry-header {
			.entry-title {
				font-size: 23px;
				font-weight: 600;
				color: #737373;
				margin: 0.67em 0;

				&:before {
					content: "#";
					margin-right: 6px;
					color: #d82e16;
					font-size: 20px;
					font-weight: 600;
				}
			}

			hr {
				height: 1px;
				border: 0;
				background: #EFEFEF;
				margin: 15px 0;
			}

			.breadcrumbs {
				font-size: 14px;
				color: #D2D2D2;
				text-decoration: none;
				margin-bottom: 30px;
			}

			.time {
				float: left;
			}

			.author {
				float: right;

			}
		}

		.entry-content {
			padding-top: 30px;
		}

		footer.post-footer {
			width: 100%;
			padding: 20px 10px;
			margin-top: 30px;
			height: 65px;
			position: relative;

			i {
				font-size: 18px;
				margin-right: 5px;
			}

			.post-like {
				float: right;
				margin: 7px 0 0 20px;
			}

			.post-share {
				float: right;
				list-style: none;
				margin-right: 20px;
			}

			.donate {
				float: left;
				line-height: 36px;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				border: 1px solid #2B2B2B;

				&:hover {
					border: 1px solid goldenrod;

					span {
						color: goldenrod;
					}
				}

				span {
					color: #2B2B2B;
					padding: 10px;
					position: relative;
					cursor: pointer;
				}

				.donate_inner {
					display: none;
					margin: 0;
					list-style: none;
					position: absolute;
					left: 80px;
					top: -40px;
					background: #FFF;
					padding: 10px;
					border: 1px solid #ddd;
					box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
					border-radius: 3px;

					&.show {
						display: block;
					}

					li {
						float: left;
					}

					img {
						width: 100px;
					}

					p {
						text-align: center;
						font-size: 15px;
						color: #D2D2D2;
						line-height: 1rem;
					}
				}

				.donate_inner:after,
				.donate_inner:before {
					content: "";
					position: absolute;
					left: 0;
					bottom: 45%;
					margin-left: -8px;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
					border-right: 8px solid #fff;
				}

				.donate_inner:before {
					left: -1px;
					border-right: 8px solid #ddd;
				}

			}

			.post-tags {
				margin: 7px 0 0 20px;
				float: left;
				text-transform: uppercase;

				a:hover {
					color: #ff6d6d;
				}
			}
		}

		.open-message {
			margin: 50px 0;
			position: relative;
			background: #2B2B2B;
			padding: 10px 30px;
			border-radius: 3px;
			font-size: 14px;
			color: #fff;

			&:after {
				content: "";
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 10px solid #2B2B2B;
				position: absolute;
				top: -8px;
				left: 48%;
			}

			p {
				margin: 10px 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			a {
				color: #A0DAD0;
				padding: 0 5px;
			}
		}
	}
</style>
